<template>
  <div class="rightInfo custom-select-container">
    <div class="airport-select-container">
      <div class="select-item select-item7">
        <label>起飞机场仰角（度）</label>
        <el-select v-model="optionsListAngleDefault71" placeholder="">
          <el-option
            v-for="item in optionsListAngle"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item select-item7">
        <label>起飞机场</label>
        <el-select v-model="airport71" placeholder="">
          <el-option
            v-for="item in airportList"
            :key="item.id"
            :label="`(${item.airportCode})${item.city}/${item.name}`"
            :value="item.airportCode"
        /></el-select>
      </div>
      <div class="select-item select-item7">
        <label>目的机场仰角（度）</label>
        <el-select v-model="optionsListAngleDefault72" placeholder="">
          <el-option
            v-for="item in optionsListAngle"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item select-item7">
        <label>目的机场</label>
        <el-select v-model="airport72" placeholder="">
          <el-option
            v-for="item in airportList"
            :key="item.id"
            :label="`(${item.airportCode})${item.city}/${item.name}`"
            :value="item.airportCode"
        /></el-select>
      </div>
      <div class="select-item select-item7">
        <label>航路仰角（度）</label>
        <el-select v-model="optionsListAngleDefault73" placeholder="">
          <el-option
            v-for="item in optionsListAngle"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item select-item7">
        <label>航路算法</label>
        <el-select v-model="optionsListAlgorithmDefault7" placeholder="">
          <el-option
            v-for="item in optionsListAlgorithm"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item select-item7">
        <label>航路运行标准</label>
        <el-select v-model="stdId7" placeholder="">
          <el-option
            v-for="item in optionsListStandard"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item select-item7">
        <label>预测星座</label>
        <el-select v-model="optionsListSatsysDefault7" placeholder="">
          <el-option
            v-for="item in optionsListSatsys"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item select-item7">
        <label>起始时间（UTC）</label>
        <el-date-picker
          :show-now="false"
          v-model="selectedstartTimeDateTime7"
          type="datetime"
          placeholder=""
          class="custom-datetime-picker"
        />
      </div>
      <div class="select-item select-item7 select-item7short">
        <label>飞行持续时间</label>
        <el-input v-model="flightHours7" /><span class="boxspan">时</span>
        <el-input v-model="flightMinutes7" /><span
          class="boxspan"
          style="margin-right: 0px"
          >分</span
        >
      </div>
      <div class="select-item" style="clear: both">
        <label>航路入口点</label>
        <el-select v-model="typesWaypoint71" placeholder="请选择">
          <el-option
            v-for="item in typesWaypointLists"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
      <div class="select-item">
        <label>航路代码</label>
        <el-select v-model="routeCode7" placeholder="请选择">
          <el-option
            v-for="item in optionsRouterSaveLists"
            :key="item.id"
            :label="item.code"
            :value="item.code"
          />
        </el-select>
      </div>
      <div class="select-item">
        <label>航路出口点</label>
        <el-select v-model="typesWaypoint72" placeholder="请选择">
          <el-option
            v-for="item in typesWaypointLists"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
      <div class="select-item" style="margin-bottom: 8px">
        <label>航路名称</label>
        <div class="routerName">
          <div class="innerBox">
            <el-checkbox
              v-for="(item, index) in routeSegments"
              :key="index"
              v-model="item.checked"
              class="white-text-checkbox"
              @change="handleCheckboxChange(index)"
            >
              {{ item.entryWaypointName }}……{{ item.routeCode }}……{{
                item.exitWaypointName
              }}
            </el-checkbox>
            >
          </div>
        </div>
      </div>
      <div class="kindBtnChanges">
        <div class="btnBox" @click="insertItem">插入选中航路前</div>
        <div class="btnBox" @click="deleteItem">删除选中航路</div>
        <div class="btnBox" @click="addItem" style="margin-right: 0px">
          追加航路
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits, computed } from "vue";

// 1. 定义接收的 props（参考示例，统一通过 defaultFormData 接收配置数据）
const props = defineProps({
  // 基础数据源（下拉列表选项）
  optionsListAngle: {
    type: Array,
    default: () => [],
  },
  airportList: {
    type: Array,
    default: () => [],
  },
  optionsListAlgorithm: {
    type: Array,
    default: () => [],
  },
  optionsListStandard: {
    type: Array,
    default: () => [],
  },
  optionsListSatsys: {
    type: Array,
    default: () => [],
  },
  typesWaypointLists: {
    type: Array,
    default: () => [],
  },
  optionsRouterSaveLists: {
    type: Array,
    default: () => [],
  },
  // 统一接收表单配置数据（核心：与示例组件保持一致）
  defaultFormData: {
    type: Object,
    default: () => ({
      optionsListAngleDefault71: "",
      airport71: "",
      optionsListAngleDefault72: "",
      airport72: "",
      optionsListAngleDefault73: "",
      optionsListAlgorithmDefault7: "",
      stdId7: "",
      optionsListSatsysDefault7: "",
      selectedstartTimeDateTime7: null,
      flightHours7: "",
      flightMinutes7: "",
      typesWaypoint71: "",
      routeCode7: "",
      typesWaypoint72: "",
      routeSegments: [], // 航路分段列表
    }),
  },
});

// 2. 定义事件发射器（仅保留核心事件，与示例组件逻辑一致）
const emit = defineEmits([
  "update:formData",
  "insertItem",
  "deleteItem",
  "addItem",
]);

// 3. 组件内部响应式变量（基于 defaultFormData 初始化）
const optionsListAngleDefault71 = ref(
  props.defaultFormData.optionsListAngleDefault71
);
const airport71 = ref(props.defaultFormData.airport71);
const optionsListAngleDefault72 = ref(
  props.defaultFormData.optionsListAngleDefault72
);
const airport72 = ref(props.defaultFormData.airport72);
const optionsListAngleDefault73 = ref(
  props.defaultFormData.optionsListAngleDefault73
);
const optionsListAlgorithmDefault7 = ref(
  props.defaultFormData.optionsListAlgorithmDefault7
);
const stdId7 = ref(props.defaultFormData.stdId7);
const optionsListSatsysDefault7 = ref(
  props.defaultFormData.optionsListSatsysDefault7
);
const selectedstartTimeDateTime7 = ref(
  props.defaultFormData.selectedstartTimeDateTime7
);
const flightHours7 = ref(props.defaultFormData.flightHours7);
const flightMinutes7 = ref(props.defaultFormData.flightMinutes7);
const typesWaypoint71 = ref(props.defaultFormData.typesWaypoint71);
const routeCode7 = ref(props.defaultFormData.routeCode7);
const typesWaypoint72 = ref(props.defaultFormData.typesWaypoint72);
// 安全初始化航路分段列表
const initialRouteSegments = props.defaultFormData?.routeSegments
  ? [...props.defaultFormData.routeSegments] // 拷贝已有数据
  : []; // 兜底空数组
const routeSegments = ref(initialRouteSegments);

// 4. 计算属性：整合所有表单数据（核心：与示例组件一致）
const formData = computed(() => ({
  optionsListAngleDefault71: optionsListAngleDefault71.value,
  airport71: airport71.value,
  optionsListAngleDefault72: optionsListAngleDefault72.value,
  airport72: airport72.value,
  optionsListAngleDefault73: optionsListAngleDefault73.value,
  optionsListAlgorithmDefault7: optionsListAlgorithmDefault7.value,
  stdId7: stdId7.value,
  optionsListSatsysDefault7: optionsListSatsysDefault7.value,
  selectedstartTimeDateTime7: selectedstartTimeDateTime7.value,
  flightHours7: flightHours7.value,
  flightMinutes7: flightMinutes7.value,
  typesWaypoint71: typesWaypoint71.value,
  routeCode7: routeCode7.value,
  typesWaypoint72: typesWaypoint72.value,
  routeSegments: [...routeSegments.value], // 深拷贝避免引用问题
}));

// 5. 深度监听表单数据变化，同步到父组件（核心：与示例组件一致）
watch(
  formData,
  (newData) => {
    emit("update:formData", newData);
  },
  { deep: true, immediate: true } // immediate: 初始化时立即同步
);

watch(
  () => props.defaultFormData.routeSegments,
  (newRouteSegments) => {
    // 父组件航路列表更新时，同步到子组件内部
    routeSegments.value = Array.isArray(newRouteSegments)
      ? [...newRouteSegments]
      : [];
  },
  { deep: true, immediate: true } // immediate：初始化时也同步一次
);

// 6. 复选框选中逻辑（内部修改 routeSegments 后通过 computed 自动同步）
const handleCheckboxChange = (currentIndex) => {
  routeSegments.value = routeSegments.value.map((item, index) => ({
    ...item,
    checked: index === currentIndex,
  }));
};

// 7. 按钮事件处理（直接触发事件，由父组件统一处理）
const insertItem = () => {
  emit("insertItem");
};
const deleteItem = () => {
  emit("deleteItem");
};
const addItem = () => {
  emit("addItem");
};
</script>

<style scoped lang="scss">
.select-item {
  margin-bottom: 12px;
}
.select-item7 {
  margin-bottom: 12px;
  width: 155px !important;
  // width: 176px;
  float: left;
  margin-right: 12px;
}
.select-item7:nth-child(even) {
  float: left;
  margin-right: 0px;
}
::v-deep .select-item7short .el-input {
  float: left;
  width: 50px !important;
  height: 28px;
}
::v-deep .select-item7short .boxspan {
  float: left;
  margin: 0 5px;
  font-size: 13px;
  color: #fff;
  line-height: 28px;
}
::v-deep .innerBox {
  overflow-y: auto;
  height: 96px;
  .white-text-checkbox {
    margin-bottom: 0;
    line-height: 32px;
  }
}
::v-deep .routerName {
  border: 1px solid #003b7a;
  padding: 5px 12px;
  padding-top: 3px;
  .el-checkbox__label {
    vertical-align: text-top;
    color: #fff;
  }
  .innerBox::-webkit-scrollbar {
    width: 4px;
  }
  .innerBox::-webkit-scrollbar-track {
    background: rgba(6, 15, 37, 0.5);
    border-radius: 2px;
  }
  .innerBox::-webkit-scrollbar-thumb {
    background: rgba(0, 175, 255, 0.4);
    border-radius: 2px;
  }
  .innerBox::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 175, 255, 0.6);
  }
}
.kindBtnChanges {
  margin-bottom: 12px;
  overflow: hidden;
  .btnBox {
    margin-right: 12px;
    cursor: pointer;
    height: 32px;
    padding: 6px 4px !important;
    float: left;
    border-radius: 4px;
    border: 1px solid #003b7a;
    font-size: 14px;
    color: #fff;
    background: transparent;
  }
}
.select-item label {
  text-align: left;
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff !important;
}
.el-select {
  width: 100%;
  // border: 1px solid #003b7a;
}
::v-deep .custom-select-container .el-select__wrapper {
  background: transparent;
  box-shadow: none;
  height: 32px;
  min-height: 32px;
}
::v-deep .custom-select-container .el-select__selected-item {
  color: #fff !important;
}
::v-deep .custom-select-container .el-select__caret {
  color: #fff !important;
}
::v-deep .custom-select-container .el-select-dropdown {
  background-color: #1e293b;
  border: 1px solid #334155;
  box-shadow: none;
}
.el-select-dropdown__item {
  height: 32px !important;
  line-height: 32px !important;
  background-color: #060f25;
  color: #fff;
}
.el-select-dropdown__item:hover {
  background-color: #0c1e4b;
  color: #fff;
}
.el-select-dropdown__item.is-selected {
  background-color: #0c1e4b;
  color: #0083cf !important;
}
:deep(.el-date-editor.el-input) {
  width: 100%;
  height: 32px;
  font-size: 14px;
}
:deep(.el-date-editor.el-input .el-input__wrapper) {
  color: #fff;
  background: transparent;
  border: 1px solid #003b7a;
  box-shadow: none;
}
:deep(.el-input__inner) {
  color: #fff;
}
::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  color: #fff;
  border: 1px solid #003b7a;
}
.airport-select-container {
  padding: 0 1px;
  height: auto;
  height: calc(100vh - 212px);
  overflow-y: auto;
  box-sizing: border-box;
}

.airport-select-container::-webkit-scrollbar {
  width: 4px;
}
.airport-select-container::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}

.airport-select-container::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}

.airport-select-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}

.airport-select-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
}
</style>
